<template>
	<div class="about">
		<el-container>
			<el-main>
				<el-row :gutter="20">
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<h3>新品首发</h3>
							<el-carousel :interval="4000" type="card" height="300px">
								<el-carousel-item>
									
								</el-carousel-item>
							</el-carousel>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<h3>排行榜</h3>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<h3>逛好街</h3>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<h3>领劵中心</h3>
						</div>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {}
</script>

<style>
	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 360px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 200px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}
</style>
